

<div class="wrapper wrapper-content page-heading animated fadeInRight">

    <div class="row">
        <div class="col-lg-9">
            <div class="tabs-container">
                <ul class="nav nav-tabs" id="tab-list-2">
                    <li class="links active" id="search-link"><a href="#search" role="tab" data-toggle="tab">Search</a></li>
                </ul>
                <div class="tab-content">
                   <div id="search" class="tab-pane active">
                        <div class="panel-body">
                            <div class=" animate fadeIn">
                                <form id="OH_searchForm" class="form-horizontal">
                                    <div class="ibox-title" style="border:none;"><h5 style="color: #00afef"><i>Search</i></h5>
                                    </div>
                                       <div class="ibox-content">

                                          <div class="form-group">
                                            <label class="col-lg-4 control-label">Item Number</label>
                                                <div class="col-lg-5 input-s">
                                                    <input type="text" placeholder="" name="OH_item_num" id="" class="form-control">
                                                </div>
                                          </div>

                                        <div class="form-group">
                                            <label class="col-lg-4 control-label"></label>
                                                <div class="col-lg-5">
                                                    <a href="javascript:document.getElementById('searchForm').reset();" class="btn btn-warning btn-md pull-right m-t-n-xs clear-btn" id="search-form"> Clear</a>
                                                    <button id="OH-search-btn" class="btn btn-primary btn-md pull-right m-t-n-xs search-btn btn-margin-right" > Search</button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                            </div>

                            <div class="row" id="search-inv-OH" >
                                <div class="col-lg-12">
                                    <div class="ibox float-e-margins">
                                        <div class="ibox-content">
                                        <div class="table-responsive">
                                            <table class="table-bordered table-compact" style="width:100%;">
                                                <thead>
                                                    <tr>
                                                        <th data-sort-ignore="false" data-type="alpha" style="padding:8px;">Item Number</th>
                                                        <th data-sort-ignore="false" data-type="alpha" style="padding:8px;">Item Description</th>
                                                        <th data-sort-ignore="false" data-type="alpha" style="padding:8px;">Sub Inventory & Locator</th>
                                                        <th data-sort-ignore="false" data-type="alpha" style="padding:8px;">Item Quantity</th>
                                                        <!-- <th data-sort-ignore="false" data-type="alpha" style="padding:8px; width:50px;">Action</th> -->
                                                    </tr>
                                                </thead>
                                                <tbody id="resultfound" >

                                                </tbody>
                                            </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- END of class row-->
</div>
<input type="hidden" id="count_add" value="0">
<input type="hidden" id="count_edit" value="0">
<input type="hidden" id="count_view" value="0">
<script>
    $(document).ready(function(){

        $("#OH-search-btn").click(function(e) {
            e.preventDefault();
            var trHTML='';
            console.log('hi');
            $('#resultfound').empty();
            $('#searchResult').show();
              $.ajax({
                type: "POST",
                url: "<?php echo base_url($this->session->userdata('forajax') . '/search_OH'); ?>",
                cache: false,
                dataType: 'json',
                data: $('#OH_searchForm').serialize(),
                success: function(e) {
                    console.log(e);
                    if(e == "No results found."){
                        console.log('error');
                        $('#resultfound').append("<td colspan='5' align='center'><h3>No Result Found</h3></td>");
                        notifymsg("danger","No Result Found");
                    }else{
                        console.log('success');
                        var countData=0;
                        $.each(e, function(i, item) {

                            trHTML += '<tr style="line-height:1;padding:0px;"><input id="transID" type="hidden" value="'+ e[i].onhand_id +'"><td style="text-align:left; padding:0px;">'+ e[i].item_num +'</td><td style="text-align:left; padding-left:0px;">'+ e[i].i_desc +'</td><td style="text-align:left; padding:0px;">'+ e[i].sub_code +' ('+e[i].loc_code+')</td><td style="text-align:right; padding:0px;">'+ e[i].item_qty +'</td></tr>';
                            countData++;
                        });
                        $('#resultfound').append(trHTML);
                        notifymsg("success","   . . . Search Success  , Found("+countData+") Item(s)");
                    }
                },
                error: function() {
                },
                complete: function() {
                    $("#OH-search-btn").removeAttr('disabled');
                },
                beforeSend: function(){
                    $("#OH-search-btn").attr('disabled',true);
                }
              });
            });

            // $(document).on('click','.btn.btn-sm.btn-outline.btn-info.btn-xs.view',function(){
            //     var id          = $(this).closest('tr').children('#transID').val();
            //     if($('#count_view').val() == 0){
            //         $('#tab-list-2').append('<li id="view-link" class="links"><a data-toggle="tab" href="#view"> View<button id="viewX" style="margin-left:30px;" class="close" type="button" title="Remove this page">×</button></a></li>');
            //         $('.tab-content').append('<div id="view" class="tab-pane"><div class="panel-body"><div id="change4"></div></div></div>');
            //         $("#count_view").val('1');
            //     }
            //     $("#change4").load("<?php echo $this->session->userdata('forload') . '/view_form/'; ?>"+id)
            //     view_action('show'); search_action('close');
            //     notifymsg("hide","hide");
            // }); 
    });
</script>